<%--
  Created by IntelliJ IDEA.
  User: liu
  Date: 2018/9/6
  Time: 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>主控制</title>
</head>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="js/css/css.css" />
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 750px;
        height: 80px;
        margin: 0 auto;
        text-align: center;
    }

    #div2 {
        width: 480px;
        height: 40px;
        margin: 0 auto;
        text-align: center;
        margin-top: -10px;

    }


    .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
        background-color: transparent;
    }
    .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
        border-width: 1px;
        border-style: solid;
        border-color: #ffffff;
    }


</style>
<body>

<div>
    <div id="div1" style="font-size: 50px;color: #F32F2F;font-family:”微软雅黑”;font-weight: 700">中废通14周年庆节目投票</div>
    <div id="div2" style="font-size: 28px;color: #F32F2F;font-family:‘SourceHanSansCN-Light’ ;font-weight: 100">一人一票 选出你最爱的节目</div>

    <div id="tableDiv" style=" width: 950px;margin: 0 auto;">
        <table id="data"></table>
    </div>
    <div style="width: 380px;margin: 0 auto;">
        <form class="layui-form">                                                           <%--   //#fc4f03--%>
            <div class="layui-btn layui-btn-lg layui-btn-radius"  id="time" style="background:#F32F2F" onclick="time(1,this)">开始投票</div>
            <div class="layui-btn layui-btn-lg layui-btn-radius"  style="background: #F32F2F" onclick="reloadTable()">刷新</div>
            <div class="layui-btn layui-btn-lg layui-btn-radius" id="finals" style="background: #F32F2F" onclick="finals(2,this)">进入决赛</div>
        </form>
    </div>
</div>
<script type="application/javascript">
    function reloadTable() {
        table.reload('data',{
            where:{
                param:param
            }
        });
    }


    /*控制是否进入决赛*/
    var p=0
    /*控制这是第几轮*/
    var param=1
    function finals(int,a) {
        if(int==2){
            debugger
            $(a).css("background", "#fc4f03");
            $(a).html("回看")
            $(a).attr("onclick", "finals(1,this)")
            if(p==0){
            $("#time").attr("onclick", "time(1,this)")
            $("#time").css("background", "#F32F2F");
            $("#time").html("开始投票")
            }
            param=2
            p++;

            initTime()
            $.get("/finals",function () {
                table.reload('data',{
                    where:{
                        param:param
                    }
                });
            })
        }else {
            $(a).css("background", "#fc4f03");
            $(a).html("进入决赛")
            $(a).attr("onclick", "finals(2,this)")
            param=1

            table.reload('data',{
                where:{
                    param:param
                }
            });
        }
        initTime()

    }
    $(function () {
        debugger
        initTime()
    })

    function initTime() {
        $.get("/getTime/"+param,function (data) {
            debugger
            if(data.startTime!=null&&data.endTime==null){
                $("#time").attr("onclick", "time(2,this)")
                $("#time").css("background", "#fc4f03");
                $("#time").html("结束投票")
            }
            if(data.startTime!=null&&data.endTime!=null){
                $("#time").removeAttr("onclick")
                $("#time").html("已结束")
            }
        })
    }

    var layer;
    var table;
    layui.use(['table', 'layer'], function () {
        table = layui.table;
        layer = layui.layer;

        table.render({
            elem: '#data'
            , url: '/data',
            where:{
              param:param
            },
            height:document.documentElement.clientHeight-200
            , cols: [[ //标题栏
                {field: '', title: '',width: 80},
                {type:"numbers"},
                {width: 400, templet:"#name"},
                {templet:"#jindu"},
                {width: 80,templet:"#num"}
            ]]
            , skin: 'nob' //表格风格
            , even: true
            , page: false //是否显示分页
            , method: 'get',
            response: {
                statusName: 'statusCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'statusMsg' //状态信息的字段名称，默认：msg
                , countName: 'totalPages' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function (res, curr, count) {
                $('.layui-table-header').css({'visibility': 'hidden'});
                animate();
            }
        });
    })


    function time(param,a) {
        $.get("/time/" + param, function () {
        })
        if(param==1) {
            $(a).attr("onclick", "time(2,this)")
            $(a).css("background", "#fc4f03");
            $(a).html("结束投票")
        }
        if(param==2){
            $(a).removeAttr("onclick")
            $(a).html("已结束")
        }

    }

</script>

<script type="application/javascript" id="jindu">
    <div class="votebox">
        <dl class="barbox">
            <dd class="barline">
                <div w="{{d.num}}" style="width:0px;" class="charts"></div>
            </dd>
        </dl>
    </div>
</script>
<script>
    function animate(){

        $(".charts").each(function(i,item){
            var a=parseInt($(item).attr("w"));
            $(item).animate({
                width: a/3+"%"
            },1000);
        });
    }

</script>
<script type="application/javascript" id="num">
<div>{{d.num}}票</div>
</script>
<script type="application/javascript" id="name">
    <div style="color: #000;font-family:”微软雅黑”;font-weight:700">{{d.name}}</div>
</script>
</body>

</html>
